Mobily Blocks es un menú creado con un plugin de jQuery y como podemos ver ademas de su vistosidad tiene una bonita animación que yo he aprovechado sustituyendo las imágenes por unas acordes para estas fechas.
Antes de decidirse por este menú debemos de tener en cuenta el espacio que vamos a necesitar y la utilidad que deseamos darle ya que dependiendo de eso serán las imágenes que le añadiremos.

Buscamos ]]></b:skin> y justo antes añadimos los estilos del menú
.nature {
display:block;
width:150px;
height:150px;
background:url(http://1.bp.blogspot.com/-9dUfdViRtXI/TvRyEoPUchI/AAAAAAAASQM/43V4slSwJKQ/s1600/1--.png) no-repeat;
cursor:pointer;
position:relative;
}
 .nature {
clear:both;
margin:0 auto;
z-index:2;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
a img {
border:none;
}
Después nos situaremos justo antes de </head> y añadiremos la librería que es la siguiente línea en rojo.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Si ya la estamos utilizando omitimos ese paso y procedemos a copiar el contenido de este archivo para pegarlo justo después de la librería jQuery. Y por último editamos un nuevo gadget de html y en su interior añadimos lo siguiente:
<div class="nature">
<ul class="reset" style="display: block; z-index: 50; opacity: 0;">
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://3.bp.blogspot.com/--uWHnmxtwj8/TvRq5Dr8ZaI/AAAAAAAASNs/Pww-urqkw18/s1600/2-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://1.bp.blogspot.com/-R0O-TVnn6Tc/TvRq5f3JpxI/AAAAAAAASN8/-vCykNp7sWA/s1600/3-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://1.bp.blogspot.com/-jGpH-siqWRI/TvRrbOHitHI/AAAAAAAASPo/qIcoMjTf9p8/s1600/10-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://2.bp.blogspot.com/-Gqp3fLaeJ2g/TvRq6EOHn3I/AAAAAAAASOU/T4VBCbe2DJU/s1600/5-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 50;">
<a href="#">
<img alt="" src="http://3.bp.blogspot.com/-8G5bwU6dS5w/TvRsKbn_rhI/AAAAAAAASQA/rZN7ZP8wqMo/s320/6-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="
http://1.bp.blogspot.com/-rrqq8WFQBqA/TvRq5GmmraI/AAAAAAAASNk/bIzejcJTLwI/s1600/1-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://4.bp.blogspot.com/-NFHTvUeUthQ/TvRrNymuvWI/AAAAAAAASPE/neXCwSp-DwQ/s1600/8-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://4.bp.blogspot.com/-88siA7EtQvI/TvRrbFvpueI/AAAAAAAASPc/iti9TnFS6nA/s1600/9-.png" />
</a>
</li>
</ul>
<a class="trigger" style="display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%;"></a>
</div>
En ese código estamos añadiendo las imágenes que las podemos sustituir por otras teniendo en cuenta que miden 150x150 y que son en formato png.
Para añadir la url de los enlaces o los sitios que deseamos enlazar debemos sustituir la almohadilla <a href="#"> por la url de cada enlace.

Todo tuyo Manu.
María Pilar

Atónita me he quedado dando una y otra vez al botón rojo de Feliz Navidad, es lo más original y divertido de cuanto he visto sobre este tema. :)

Responder
MaCaPe

Bonita animación, lucirá un menú muy vistoso.
Felices Fiestas!!

Responder
Cocina

Hermoso y original!
Aprovecho para desearte una muy feliz navidad y un excelente año nuevo!
besos :)

Responder
Johnny Uve

Estupendo menu, este no lo habia visto. Feliz Navidad, Gem@ y un brindis a tu salud.

Responder
JMiur

Feliz Navidad, Gem@ Me sumo a los brindis !!!!!

Responder
Gem@

:: m.p.moreno gracias por pasar y Feliz Navidad para ti también :)

:: Felices Fiestas MaCaPe !!

:: Igualmente Cocofansclub :)

:: Johnny siempre se descubren cosas nuevas , Feliz navidad :D

:: Feliz Navidad para ti también Vagabundia y los brindis que no falten :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top